<template>
  <div class="rooms-container">
    <div class="header">
      <el-button type="primary" @click="handleCreate">新增会议室</el-button>
    </div>
    
    <el-table :data="rooms" border stripe>
      <el-table-column prop="room_name" label="会议室名称" width="180" />
      <el-table-column prop="type" label="类型" width="120">
        <template #default="{ row }">
          {{ row.type === 'classroom' ? '教室型' : '圆桌型' }}
        </template>
      </el-table-column>
      <el-table-column prop="area" label="面积(㎡)" width="100" />
      <el-table-column prop="seats" label="座位数" width="100" />
      <el-table-column prop="equipment" label="设备">
        <template #default="{ row }">
          <el-tag
            v-for="item in row.equipment"
            :key="item"
            size="small"
            class="mr-2"
          >
            {{ getEquipmentName(item) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="price" label="价格(元/小时)" width="120" />
      <el-table-column prop="status" label="状态" width="120">
        <template #default="{ row }">
          <el-tag :type="getStatusType(row.status)">
            {{ getStatusName(row.status) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template #default="{ row }">
          <el-button type="primary" size="small" @click="handleEdit(row)">编辑</el-button>
          <el-button type="danger" size="small" @click="handleDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <room-dialog
      v-model="dialogVisible"
      :room="currentRoom"
      :mode="dialogMode"
      @submit="handleSubmit"
    />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getRooms, createRoom, updateRoom, deleteRoom } from '@/api/rooms'
import RoomDialog from '@/components/RoomDialog.vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const rooms = ref([])
const dialogVisible = ref(false)
const dialogMode = ref('create')
const currentRoom = ref(null)

const equipmentNames = {
  projector: '投影仪',
  audio: '音响',
  network: '网络',
  whiteboard: '白板',
  multimedia: '多媒体',
  stage: '舞台',
  video_conference: '视频会议',
  telephone: '电话'
}

const statusNames = {
  idle: '空闲',
  locked: '锁定',
  booked: '已预订',
  using: '使用中',
  maintenance: '维护中'
}

const statusTypes = {
  idle: 'success',
  locked: 'warning',
  booked: '',
  using: 'info',
  maintenance: 'danger'
}

const getEquipmentName = (key) => {
  return equipmentNames[key] || key
}

const getStatusName = (status) => {
  return statusNames[status] || status
}

const getStatusType = (status) => {
  return statusTypes[status] || ''
}

const fetchRooms = async () => {
  try {
    const response = await getRooms()
    // console.log(response)
    rooms.value = response
  } catch (error) {
    console.error(error)
  }
}

onMounted(() => {
  fetchRooms()
})

const handleCreate = () => {
  currentRoom.value = {
    room_name: '',
    type: 'classroom',
    area: 0,
    seats: 0,
    equipment: [],
    price: 0,
    room_id: 0
  }
  dialogMode.value = 'create'
  dialogVisible.value = true
}

const handleEdit = (room) => {
  currentRoom.value = {
    ...room,
    equipment: room.equipment
  }
  dialogMode.value = 'edit'
  dialogVisible.value = true
}

const handleDelete = async (room) => {
  try {
    await ElMessageBox.confirm(`确定要删除会议室 "${room.room_name}" 吗?`, '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    await deleteRoom(room.room_id)
    ElMessage.success('删除成功')
    fetchRooms()
  } catch (error) {
    if (error !== 'cancel') {
      console.error(error)
    }
  }
}

const handleSubmit = async (room) => {
  try {
    if (dialogMode.value === 'create') {
      await createRoom(room)
      ElMessage.success('创建成功')
    } else {
      await updateRoom(room.room_id, room)
      ElMessage.success('更新成功')
    }
    fetchRooms()
    dialogVisible.value = false
  } catch (error) {
    console.error(error)
  }
}
</script>

<style scoped>
.rooms-container {
  padding: 20px;
}

.header {
  margin-bottom: 20px;
}

.mr-2 {
  margin-right: 8px;
}
</style>